<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jInvertScroll Demo Page</title>
    <link rel="stylesheet" href="css/example.css" />
</head>
<body>
    <h1>jInvertScroll Example</h1>
    
    <div class="horizon scroll">
        <img src="images/horizon.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="images/middle.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="images/front.png" alt="" />
    </div>
    
    <script type="text/javascript" src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../src/jquery.jInvertScroll.js"></script>
    <script type="text/javascript">
    (function($) {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });

        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    }(jQuery));
    </script>
</body>
</html>
